import ArticleItem from '@/components/ArticleItem'
import { RootState } from '@/store'
import { getNewList, refreshNewList } from '@/store/action/channel'
import { InfiniteScroll, PullToRefresh } from 'antd-mobile'
import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import Channels from './compomemt/channels'
import styles from './index.module.scss'
export default function Home() {

  const { newsList, activeId, nowTime } = useSelector((state: RootState) => state.channel)

  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(getNewList(activeId, Date.now(), true))
  }, [dispatch, activeId])

  const loadMore = async () => {
    await dispatch(getNewList(activeId, nowTime[activeId], false))
  }

  return (
    <div className={styles.root}>
      <Channels />
      <div className='article-list'>
        <PullToRefresh
        
        onRefresh={async () => {
            await dispatch(refreshNewList(activeId))
          }}
        >
          {newsList[activeId] && newsList[activeId].map(item => (
            <ArticleItem key={item.art_id} data={item} />
          ))}
        </PullToRefresh>


        <InfiniteScroll loadMore={loadMore} hasMore={!!nowTime[activeId]} />

      </div>
    </div>
  )
}
